<template>
  <div class="allnews_page">
      <ul>
          <li v-for="(item,index) in dataArr" :key="index">
              <div class="left">
                  <div class="img">
                      <img :src="require('../../assets/images/newscenter/gerennwes.png')" alt="">
                  </div>
                  <div class="r">
                      <p>{{item.title}}</p>
                      <p>发布人：{{item.sourceName}}</p>
                  </div>
              </div>
              <div class="right">
                   <span>{{item.createTime}}</span>
                   <span @click="gotoNewsDtail(item.id)">></span>
              </div>
              <div class="tag" v-show="item.isReader==1">
                  <img :src="require('../../assets/images/newscenter/red.png')" alt="">
              </div>
          </li>

      </ul>
  </div>
</template>

<script>
import {newsCenterListApi} from '../../request/api'
export default {
    data(){
        return {
            dataArr:[],
        }
    },
    methods:{
        gotoNewsDtail(id){
            // console.log(1);
            this.$router.push('/newsdetail/' + id)
        }
    },
    created(){
        newsCenterListApi({
            current:1,
            size:4,
            type:0

        }).then(res=>{
            // console.log(res);
            this.dataArr = res.data.records
        })
    }

}
</script>

<style lang="less" scoped>
ul{
    margin-top: 10px;
    li{
        // height: 65px;
        background-color: #fff;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        .left{
            display: flex;
            .img{
                width: 37px;
                height: 37px;
                // border: 1px solid #000;
                margin-right: 15px;
                border-radius: 50%;
                img{
                    width: 100%;
                }
            }
            .r{
                p{
                    &:nth-of-type(2){
                        margin-top: 6px;
                        color: #999;
                    }
                }
            }
        }

        .right{
            color: #999;
            font-size: 14px;
            span{
                margin-left:10px
            }
        }

        .tag{
            width: 8px;
            height: 8px;
            position: absolute;
            left: 42px;
            top: 10px;
            img{
                width: 100%;
            }
        }
    }
}
</style>